<template>
  <el-table-wrapper
    url="/mock/data.json"
    type="s"
    :ajax="ajax"
    :params="params"
    :check-params="onCheckParams"
    pager-position="both"
    :ajax-option-foo="true"
    :ajax-option-bar="true"
    :ajax-option-required="['size', 'index']"
    :response-handler="responseHandler"
    t-row-class-name="customize-row-class"
    t-highlight-current-row
    load-when-params-change
    advance-selection
    check-field="checked"
    ref="table"
    t-border
  >
    <template #header="{data}">
      <div>
        <span>selected: {{ data.selected }}</span>
        <button @click="selectAll()">全选</button>
        <button @click="deselectAll()">取消全选</button>
      </div>
    </template>
    <template #pagerPrepend>
      <el-button size="small" @click="getChanges">获取变化的数据</el-button>
      <span>触发的字段</span>
      <input v-model="params.triggerField" title="变化时自动重新加载"/>
      <span>忽略的字段</span>
      <input v-model="params.ignoreField" title="变化时不会自动重新加载"/>
      <button @click="$refs.table.load()" title="主动查询时，会带上忽略的字段">查询</button>
    </template>
    <template #default="{toggle}">
      <el-table-column type="selection" width="80px">
        <template v-slot="{row}">
          <el-checkbox :value="row.checked" @change="toggle(row)"/>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <editable-column label="Name" prop="name" editable></editable-column>
      <editable-column label="Dept."
                       prop="dept"
                       editable
                       :renderer="deptRenderer"
                       editor-type="select"
                       :editor-items="depts"></editable-column>
      <editable-column label="Remark" prop="remark" editable editor-type="textarea" :editor-validator="remarkValidator">
        <template v-slot="{row, value}">
          {{ value }}
        </template>
      </editable-column>
      <el-table-column label="操作" width="160">
        <template v-slot="{row}">
          <el-button size="mini" type="text" @click="$refs.table.beginEdit(row)">编辑</el-button>
          <el-button size="mini" type="text" @click="$refs.table.endEdit(row)">保存</el-button>
          <el-button size="mini" type="text" @click="$refs.table.cancelEdit(row)">取消</el-button>
        </template>
      </el-table-column>
    </template>
  </el-table-wrapper>
</template>

<script>
import tableMixin from './table.mixin'
import axios from 'axios'

export default {
  mixins: [tableMixin],
  data() {
    return {
      depts: [{
        label: '研发部',
        value: 1
      }, {
        label: '财务部',
        value: 2
      }]
    }
  },
  methods: {
    ajax(e) {
      return new Promise((resolve, reject) => {
        axios.request(e).then(response => {
          const {pageSize, pageIndex} = e.params
          setTimeout(() => {
            resolve({
              list: response.data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize),
              total: response.data.length
            })
          }, 1000)
        }).catch(response => {
          reject(response.data)
        })
      })
    },
    responseHandler(response) {
      return new Promise(resolve => {
        response.list.forEach(item => {
          item.name += '#->add-by-response-handler'
        })
        resolve(response)
      })
    },
    selectAll() {
      this.$refs.table.selectAll()
    },
    deselectAll() {
      this.$refs.table.deselectAll()
    },
    deptRenderer({value}) {
      for (const dept of this.depts) {
        if (dept.value === value) {
          return dept.label
        }
      }
      return value
    },
    getChanges() {
      console.log(this.$refs.table.getEditChanges())
    },
    remarkValidator({value}) {
      if (!value) {
        return '不能为空'
      }
      if (value.length < 10) {
        return '不能少于10个字'
      }
    }
  }
}
</script>

<style scoped>

</style>
